import React, { Component } from 'react'
import styles from './index.module.scss'

// 导入接口
import { login } from 'api/user'

// 导入组件
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
import Logo from 'assets/img/logo.png'

import { setToken } from 'utils/auth'

export default class Login extends Component {
  // 收集表单数据
  login = async (value) => {
    // console.log(value)
    const { mobile, code } = value
    try {
      const { data: res } = await login(mobile, code)
      console.log(res)
      // 存储本地token
      setToken(res.token)
      // 跳转到首页
      const { state } = this.props.location
      if (state) {
        this.props.history.push(state.from)
      } else {
        this.props.history.push('/home')
      }
      message.success('登录成功', 1.5)
    } catch (err) {
      console.dir(err)
      message.warning(err.response.data.message, 1.5)
    }
  }

  render() {
    return (
      <div className={styles.login}>
        <Card className="login-container">
          <img src={Logo} className="login-logo" alt="" />
          {/* 表单 */}
          <Form
            name="basic" //  默认值
            size="large"
            validateTrigger={['onBlur', 'onChange']}
            initialValues={{
              agree: true,
              mobile: '13911111111',
              code: '246810',
            }}
            onFinish={this.login}
          >
            <Form.Item
              name="mobile"
              rules={[
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '手机号码格式不对',
                  validateTrigger: 'onBlur',
                },
                {
                  required: true,
                  message: '请输入手机号',
                  validateTrigger: 'onBlur',
                },
              ]}
            >
              <Input allowClear autoComplete="off" placeholder="请输入手机号" />
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                {
                  pattern: /^\d{6}$/,
                  message: '验证码格式不对',
                  validateTrigger: 'onBlur',
                },
                {
                  required: true,
                  message: '请输入验证码',
                  validateTrigger: 'onBlur',
                },
              ]}
            >
              <Input.Password
                allowClear
                autoComplete="off"
                placeholder="请输入验证码"
              />
            </Form.Item>

            <Form.Item
              name="agree"
              valuePropName="checked"
              rules={[
                {
                  validator: async (rule, val) => {
                    // console.log(rule, val)
                    if (val) return
                    throw new Error('请阅读协议')
                  },
                },
              ]}
            >
              <Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}
